<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .destination-container {
            display: flex;
            margin-bottom: 20px;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 1000px; /* 你可以设置一个合适的宽度 */
            height: 250px; /* 你可以设置一个合适的高度 */
            margin: 20px auto;
        }


        .destination-image {
            width: 50%;
            height: auto;
            object-fit: cover;
        }

        .destination-info {
            width: 50%;
            padding: 20px;
        }

        h2, p {
            margin: 0;
        }

        .search {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 100px; /* 调整垂直位置 */
        }

        /* 顶部导航栏样式 */
        nav {
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 99;
            text-align: center; /* 居中显示 */
            display: flex;
            align-items: center;
            padding: 5px 20px;
        }

        nav img {
            height: 30px;
        }

        nav a {
            display: inline-block;
            color: #555;
            text-align: center;
            padding: 10px 60px; /* 调整导航栏每个元素的大小 */
            text-decoration: none;
        }

        nav a:hover {
            color: #000;
            background-color: #f5f5f5;
        }

        nav a.active {
            color: #4caf50;
            background-color: #fff;
        }

        .dropdown {
            position: relative;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            top: 100%;
            width: 150px;
            background-color: #f9f9f9;
            padding: 10px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 6px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown:hover .dropdown-content,
        .dropdown-content:hover {
            display: block;
        }
        /* 顶部导航栏样式 */

        /* 喜好标签弹窗 */
        #tagPopup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        .popup-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .popup-container h3 {
            margin-top: 0;
            font-size: 20px;
        }

        .popup-container ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .popup-container li {
            margin-bottom: 10px;
        }

        .popup-container label {
            margin-left: 10px;
            font-size: 16px;
        }

        .popup-container button {
            display: block;
            margin: 20px auto 0;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .popup-container button:hover {
            background-color: #3e8e41;
        }
        /* 喜好标签弹窗 */
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<nav>
    <!-- logo -->
    <div class="dropdown">
        <a href="http://sight.travel.com/">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/logo.jpg" alt="Logo">
        </a>
    </div>
    <div class="dropdown">
        <a href="http://sight.travel.com/theme" target="_blank">主题精选</a>
    </div>
    <div class="dropdown">
        <a href="http://ticket.travel.com/" target="_blank">去旅行</a>
    </div>
    <div class="dropdown">
        <a href="#">联系我们</a>
    </div>
    <div class="dropdown">
        <a href="http://member.travel.com/sign" target="_blank">签到</a>
    </div>
    <div class="dropdown">
        <a href="#">我的</a>
        <div class="dropdown-content">
            <a href="http://member.travel.com/myAttractionCollection" target="_blank">景点收藏</a>
            <a href="http://member.travel.com/myTicketCollection" target="_blank" rel="nofollow" data-request-method="get">票务收藏</a>
            <a href="http://member.travel.com/memberOrder.html" target="_blank">我的订单</a>
            <a href="http://member.travel.com/myCollection" target="_blank">写游记</a>
            <a href="http://member.travel.com/myCollection" target="_blank">我的游记</a>
            <a href="http://member.travel.com/myCollection" target="_blank">我的足迹</a>
            <a href="http://member.travel.com/myCollection" target="_blank">浏览记录</a>
            <a href="http://member.travel.com/myCollection" target="_blank">个人信息</a>
        </div>
    </div>
    <a th:if="${loginUser != null}">欢迎, [[${loginUser.username}]]</a>
    <a th:if="${loginUser == null}" href="http://auth.travel.com/login.html">你好，请登录</a>
    <a th:if="${loginUser == null}" href="http://auth.travel.com/regist.html" class="li_2">免费注册</a>
    <a th:if="${loginUser != null}" href="http://auth.travel.com/loguot.html" class="li_2">退出</a>
</nav>

<!-- 搜索栏 -->
<div class="search">
    <input id="searchText" type="text" placeholder="输入目的地..." style="width: 400px; height: 50px;font-size: 18px;"/>
    <img src="/image/search.png" onclick="search()" style="margin-left: 10px;">
</div>

<!-- 第一个景点 -->
<div th:each="attraction : ${attractionList}" class="destination-container"
     th:onclick="'window.open(\'http://sight.travel.com/' + ${attraction.attractionId} + '.html\', \'_blank\')'">
    <img class="destination-image" th:src="${attraction.defaultImageUrl}" alt="景点图片">
    <div class="destination-info">
        <h2 th:text="${attraction.name}">景点名称 2</h2>
        <p th:text="${attraction.introduction}">这是景点2的简介。你可以添加更多有关景点的信息。</p>
    </div>
</div>

<div id="tagPopup" style="display: none;">
    <div class="popup-container">
        <h3>请选择您的初选景点标签：</h3>
        <div class="tag-row">
            <label><input type="checkbox" name="tag" value="古代遗址">古代遗址</label>
            <label><input type="checkbox" name="tag" value="博物馆">博物馆</label>
            <label><input type="checkbox" name="tag" value="公园">公园</label>
        </div>
        <div class="tag-row">
            <label><input type="checkbox" name="tag" value="主题公园">主题公园</label>
            <label><input type="checkbox" name="tag" value="自然景观">自然景观</label>
            <label><input type="checkbox" name="tag" value="人文景观">人文景观</label>
        </div>
        <div class="tag-row">
            <label><input type="checkbox" name="tag" value="水域风光">水域风光</label>
            <label><input type="checkbox" name="tag" value="生物景观">生物景观</label>
            <label><input type="checkbox" name="tag" value="民族风俗">民族风俗</label>
        </div>
        <button onclick="submitTags()">确定</button>
    </div>
</div>


</body>

<script type="text/javascript">
    // 全文检索
    function search() {
        var keyword=$("#searchText").val()
        var url ="  http://search.travel.com/attractionList.html?keyword="+keyword;
        window.open(url);
    }

    window.onload = function() {
        var showTagPopup = [[${showTagPopup}]];
        if (showTagPopup) {
            // 显示弹窗
            document.getElementById("tagPopup").style.display = "block";
        }
    }

    // 提交标签选择结果
    function submitTags() {
        var tags = [];
        var checkboxes = document.querySelectorAll("#tagPopup input[type='checkbox']");
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                tags.push(checkboxes[i].value);
            }
        }
        // 将选中的标签提交到后端处理
        console.log("tags "+tags);
        // 使用 AJAX 发送请求
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://recommend.travel.com/saveInitialLikeTag/" + tags.join(","), true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 请求成功后，隐藏弹窗并进行重定向
                document.getElementById("tagPopup").style.display = "none";
                window.location.href = "http://sight.travel.com/";
            }
        };
        xhr.send();
    }
</script>
</html>